<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .da{
            width: 600px;
            height: 600px;
            position: relative;
            top: 150px;
            left: 0;
            margin: auto;
        }
        .ul{
            width: 600px;
            height: 50px;
            display: flex;
            background-color: aquamarine;
            border-radius: 5px;
        }
        .ul li{
            height: 20px;
            list-style: none;
            margin-top: 15px;
            margin-left: 30px;
            border-right: 1px #999 solid;
            padding-right: 10px;
        }
        ul{
            display: none;
        }
        .zo{
            width: 600px;
            height: 350px;
            margin-top: 20px;
            display: flex;
        }
        .zuo span{
            position: absolute;
            top: 50%;
            font-size: 40px;
            display: none;
            margin-top: -20px;
        }
        .zuo .l{
            left: 5px;
        }
        .zuo .r{
            right: 5px;
        }
        ul{
            width: 200px;
            height: 350px;
            position: relative;
            display: flex;
        }
        .zuo{
            width: 200px;
            height: 350px;
            position: relative;
            display: flex;
            overflow: hidden;
        }
        li{
            list-style: none;
        }
        ul img{
            width: 200px;
            height: 350px;
        }
        .zs{
            width: 180px;
            height: 150px;
        }
        .zs img{
            width: 180px;
            height: 150px;
        }
        .zx{
            width: 80px;
            height: 180px;
            display: inline-block;
            margin-top: 20px;
            margin-right: 12px;
        }
        .zx img{
            width: 80px;
            height: 180px;
        }
        .rs{
            width: 196px;
            height: 150px;
        }
        .rs img{
            width: 196px;
            height: 150px;
        }
        .rx{
            width: 196px;
            height: 180px;
            margin-top: 20px;
        }
        .rx img{
            width: 196px;
            height: 180px;
        }
        ol{
            position: absolute;
            left: 50%;
            bottom: 20px;
            display: flex;
            margin-left: -38px;
        }
        ol li{
            list-style: none;
            width: 10px;
            height: 10px;
            margin-left: 5px;
            border-radius: 50%;
            background-color: #fff;
            z-index: 99;
        }
    </style>
</head>
<body>
    <div class="da">
        <div class="shang">
            <ul class="ul">
                <li style="color: red;"><b>天猫</b></li>
                <li style="color: red;"><b>淘宝直播</b></li>
                <li style="color: red;"><b>1688严选</b></li>
                <li style="color: red;"><b>司法拍卖</b></li>
                <li style="color: green;"><b>天猫超市</b></li>
                <li style="border-right: 0;"><b>聚划算</b></li>
            </ul>    
        </div>
        <div class="zo">
            <div class="zuo">
                <ul class="tt">
                    <li ><img src="./images/1.jpg"></li>
                    <li><img src="./images/2.jpg"></li>
                    <li><img src="./images/3.jpg"></li>
                    <li><img src="./images/4.jpg"></li>
                    <li><img src="./images/5.jpg"></li>
                </ul>
            <span class="iconfont icon-xiangzuojiantou l"></span>
            <span class="iconfont icon-xiangyoujiantou r"></span>
            <ol>
                <li style="background-color: red;"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
            </div>
            <div style="margin-left: 15px;">
                <div class="zs"><img src="./images/2.jpg"></div>
                <div class="zx"><img src="./images/2.jpg"></div>
                <div class="zx"><img src="./images/4.jpg"></div>
            </div>
            <div >
                <div class="rs"><img src="./images/5.jpg"></div>
                <div class="rx"><img src="./images/1.jpg"></div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    var ran=document.querySelector('.zuo .r')
    var zan=document.querySelector('.zuo .l')
    var zuo=document.querySelector('.zuo')
    var imgs=document.querySelectorAll('.tt img')
    var lis=document.querySelectorAll('ol li')
    var ul=document.querySelector('.tt')
    var num=0
    ran.onclick=function(){
        num++
        if(num>imgs.length-1){
            num=0
        }
        ul.style.left=`${-num*200}px`
        bs(num)
    }
    zan.onclick=function(){
        num--
        if(num<0){
            num=imgs.length-1
        }
        ul.style.left=`${-num*200}px`
        bs(num)
    }
    zuo.onmouseenter=function(){
        ran.style.display='block'
        zan.style.display='block'
        clearInterval(dsq)
    }
    zuo.onmouseleave=function(){
        ran.style.display='none'
        zan.style.display='none'
        zdlb()
    }
    function zdlb(){
        dsq=setInterval(function(){
            ran.onclick()
        },2000)
    }
    zdlb()
    for(i=0;i<lis.length;i++){
        lis[i].setAttribute('index',i)
        lis[i].onclick=function(){
            var index=this.getAttribute('index')
            num=index
            ul.style.left=`${-num*200}px`
            bs(num)
        }
    }
    function bs(index){
        for(i=0;i<lis.length;i++){
            lis[i].style.backgroundColor='#fff'
        }
        lis[index].style.backgroundColor='red'
    }
</script>